<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="skuParams.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input
          placeholder="价格(元)"
          type="number"
          v-model="skuParams.price"
        ></el-input>
      </el-form-item>
      <el-form-item label="重量(克)">
        <el-input
          placeholder="重量(克)"
          type="number"
          v-model="skuParams.weight"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input
          placeholder="SKU描述"
          type="textarea"
          v-model="skuParams.skuDesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true">
          <el-form-item
            :label="pAttr.attrName"
            v-for="pAttr in platFormAttr"
            :key="pAttr.id"
          >
            <el-select
              placeholder="请选择"
              style="width: 200px"
              v-model="pAttr.pAttrIdAndValueId"
            >
              <el-option
                :label="pAttrValue.valueName"
                v-for="pAttrValue in pAttr.attrValueList"
                :key="pAttrValue.id"
                :value="`${pAttr.id}:${pAttrValue.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true">
          <el-form-item
            :label="sAttr.saleAttrName"
            v-for="sAttr in saleAttr"
            :key="sAttr.id"
          >
            <el-select
              placeholder="请选择"
              style="width: 200px"
              v-model="sAttr.attrIdAndSttrValueId"
            >
              <el-option
                :label="sAttrValue.saleAttrValueName"
                :value="`${sAttr.id}:${sAttrValue.id}`"
                v-for="sAttrValue in sAttr.spuSaleAttrValueList"
                :key="sAttrValue.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片名称">
        <el-table border :data="spuImageList" ref="table">
          <el-table-column
            type="selection"
            width="100px"
            align="center"
          ></el-table-column>
          <el-table-column label="图片">
            <template #="{ row }">
              <img :src="row.imgUrl" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template #="{ row }">
              <el-button type="primary" size="small" @click="defaultImg(row)">
                默认图片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { SpuData, SaleAttr, SpuImage } from '@/api/product/spu/type'
import type { Attr } from '@/api/product/attr/type'
import type { SaveSku } from '@/api/product/sku/type'
import { reqAttr } from '@/api/product/attr'
import { reqSaleAttr, reqSpuImage } from '@/api/product/spu'
import { reqSaveSkuInfo } from '@/api/product/sku'
import { ElMessage } from 'element-plus'
let $emit = defineEmits(['update:scene'])
let platFormAttr = ref<Attr[]>([])
let saleAttr = ref<SaleAttr[]>([])
let spuImageList = ref<SpuImage[]>([])
let skuParams = reactive<SaveSku>({
  category3Id: '',
  spuId: '',
  tmId: '',
  skuName: '',
  price: '',
  weight: '',
  skuDesc: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuDefaultImg: '',
})
const table = ref()
const cancel = () => {
  $emit('update:scene', { scene: 0, type: '' })
}
const initSkuData = (
  c1Id: number | string,
  c2Id: number | string,
  row: SpuData,
) => {
  skuParams.category3Id = row.category3Id
  skuParams.spuId = row.id as number
  skuParams.tmId = row.tmId
  Promise.all([
    reqAttr(c1Id, c2Id, row.category3Id),
    reqSaleAttr(row.id as number),
    reqSpuImage(row.id as number),
  ]).then(([attrs, saleAttrs, images]) => {
    if (attrs.code == 200) {
      platFormAttr.value = attrs.data
    }
    if (saleAttrs.code == 200) {
      saleAttr.value = saleAttrs.data
    }
    if (images.code == 200) {
      spuImageList.value = images.data
    }
  })
}
const save = () => {
  skuParams.skuAttrValueList = platFormAttr.value.reduce(
    (prev: any, next: any) => {
      if (next.pAttrIdAndValueId) {
        const [attrId, valueId] = next.pAttrIdAndValueId.split(':')
        prev.push({ attrId, valueId })
      }
      return prev
    },
    [],
  )
  skuParams.skuSaleAttrValueList = saleAttr.value.map((item) => {
    if (item.attrIdAndSttrValueId) {
      const [saleAttrId, saleAttrValueId] = item.attrIdAndSttrValueId.split(':')
      return { saleAttrId, saleAttrValueId }
    }
  })
  reqSaveSkuInfo(skuParams).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '添加成功',
      })
      $emit('update:scene', { scene: 0, type: '' })
    } else {
      ElMessage({
        type: 'error',
        message: '添加失败',
      })
    }
  })
}
const defaultImg = (row: any) => {
  skuParams.skuDefaultImg = row.imgUrl
  table.value.clearSelection()
  table.value.toggleRowSelection(row, true)
}
defineExpose({ initSkuData })
</script>
<script lang="ts">
export default {
  name: 'SkuForm',
}
</script>
